<template>
  <!-- 
    el-dialog 基础配置
    - v-model: 绑定一个布尔值，控制弹窗的显示与隐藏
    - title: 弹窗标题，通过 prop 传入
    - width: 弹窗宽度
    - :show-close="false": 隐藏右上角的默认关闭 'x' 图标
    - @open="handleOpen": 弹窗打开时的回调
    - top="25vh": 让弹窗在垂直方向上更居中一些
  -->
  <el-dialog
    v-model="dialogVisible"
    :title="title"
    width="500px"
    :show-close="false"
    @open="handleOpen"
    top="25vh"
  >
    <!-- 1. 自定义头部，以匹配图片中的 "返回" 按钮 -->
    <template #header="{ close, titleId, titleClass }">
      <div class="custom-header">
        <h4 :id="titleId" :class="titleClass">{{ title }}</h4>
        <el-button round @click="close">返回</el-button>
      </div>
    </template>

    <!-- 2. 表单内容 -->
    <el-form label-position="top" @submit.prevent>
      <el-form-item :label="label">
        <el-input 
          v-model="inputValue" 
          :placeholder="`请输入${label.replace('输入', '')}`" 
          clearable 
          size="large"
        />
      </el-form-item>
    </el-form>

    <!-- 3. 自定义底部，以匹配图片中的 "保存" 按钮 -->
    <template #footer>
      <div class="custom-footer">
        <el-button type="success" @click="handleConfirm">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed } from 'vue';
import { ElMessage } from 'element-plus';

// --- 定义 Props 和 Emits ---
const props = defineProps({
  // 通过 v-model 控制弹框显示/隐藏
  modelValue: {
    type: Boolean,
    required: true,
  },
  // 弹框标题, e.g., "修改邮箱"
  title: {
    type: String,
    required: true,
  },
  // 输入框顶部的标签, e.g., "输入新邮箱"
  label: {
    type: String,
    required: true,
  },
  // 输入框的初始值 (即用户当前的值)
  initialValue: {
    type: String,
    default: '',
  },
});

const emit = defineEmits(['update:modelValue', 'submit']);

// --- 响应式状态 ---
// 绑定输入框的值
const inputValue = ref('');

// 使用 computed 属性来同步 v-model, 这是 Vue 3 中 v-model 的标准用法
const dialogVisible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val),
});

// --- 方法 ---

// 弹框打开时，用父组件传入的初始值填充输入框
const handleOpen = () => {
  inputValue.value = props.initialValue;
};

// 点击“保存”按钮的逻辑
const handleConfirm = () => {
  const newValue = inputValue.value.trim();
  // 基础校验
  if (!newValue) {
    ElMessage.error(`${props.label.replace('输入', '')}不能为空`);
    return;
  }
  if (newValue === props.initialValue) {
    ElMessage.warning('内容未作修改');
    dialogVisible.value = false; // 如果内容没变，直接关闭
    return;
  }

  // 触发 submit 事件，将新值传递给父组件
  // 父组件监听到该事件后，负责调用后端 API
  emit('submit', newValue);
  
  // 注意：提交后由父组件根据API调用结果来决定是否关闭弹窗，
  // 这样交互更清晰（例如，API调用失败时不应关闭弹窗）。
};
</script>

<style scoped>
/* 自定义头部样式 */
.custom-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 自定义底部样式，让保存按钮靠左，并添加一些边距 */
.custom-footer {
  text-align: left;
  padding-left: 10px;
}

/* 匹配图片中的绿色保存按钮样式 */
.custom-footer .el-button {
  min-width: 120px;
  height: 40px;
  border-radius: 20px; /* 制作圆角按钮 */
}

/* 
  使用 :deep() 来穿透 scoped 限制，微调 Element Plus 组件的内部样式 
*/
:deep(.el-dialog__header) {
  margin-right: 0; /* 移除因 show-close=true 带来的默认 margin */
  border-bottom: 1px solid #e4e7ed; /* 添加头部分割线 */
  padding: 16px 24px;
}

:deep(.el-dialog__body) {
  padding: 24px;
}

:deep(.el-dialog__footer) {
  padding-top: 10px;
  padding-bottom: 20px;
}

:deep(.el-form-item__label) {
  color: #303133;
  font-weight: 500;
}
</style>
